<template>
  <div>
    <!-- data：展示的数据
           props：children判断是否有子节点，label页面展示的字段
           @node-click 点了节点，可以获取到点击的节点的数据       
    -->
    <!-- <el-tree 
    :data="data" 
    :props="{children: 'children',label: 'label'}"
    @node-click="handleNodeClick"
    show-checkbox
    node-key="id"
    ref="tree"
    ></el-tree>
    <el-button @click="getTree">获取tree的数据</el-button>
    <el-button @click="setTree">获取tree的数据</el-button>
    <el-button @click="clearTree">清空tree</el-button>-->
    <!-- 添加按钮 -->
    <!-- {{arr}} -->
    <el-button @click="willAdd" type="primary" class="but">添加</el-button>
    <!-- 表格 -->
    <!-- 绑定自定义事件willUpdate -->
    <!-- arr传给list -->
    <list-vue @willUpdate="willUpdate" :arr="arr" @init="getlist"></list-vue>
    <!-- 弹框 -->
    <!-- 传递info  传递arr-->
    <!-- 绑定自定义事件getlist -->
    <form-vue :info="info" :arr="arr" @init="getlist" ref="form"></form-vue>
  </div>
</template>
<script>
import listVue from "./components/list.vue";
import formVue from "./components/form.vue";
import { mapGetters, mapActions } from "vuex";
import { reqrolelist } from '../../http/api';
import {toggle} from "../../mixins/index"
export default {
  components: {
    listVue,
    formVue
  },
  mixins:[toggle],
  props: [],
  data() {
    return {

      arr:[]
    };
  },
  computed: {
    ...mapGetters({})
  },
  mounted() {
    this.getlist();
  },
  methods: {
    ...mapActions({}),
    //请求列表
    getlist(){
      reqrolelist().then(res=>{
        if(res.data.code == 200){
            this.arr = res.data.list?res.data.list:[]
        }
      })
    }
    //     handleNodeClick(data) {
    //       console.log(data);
    //     },
    //     //获取tree的数据
    //     getTree() {
    //       console.log(this.$refs.tree.getCheckedKeys());
    //     },
    //     //清空tree数据
    //     clearTree() {
    //       this.$refs.tree.setCheckedKeys([]);
    //     },
    //     //给树设置值
    //     setTree() {
    //       this.$refs.tree.setCheckedKeys([1, 2, 3, 4, 5]);
    //     }
  }
};
</script>
<style scoped lang="less">
@import "../../less/index.less";
.but {
  margin: @margin10;
}
</style>